<template>
  <div class="exAminationEcharts">
    <div id="exAminationEcharts" style="width: 100%;"></div>
  </div>
</template>

<script>
  export default {
    props: ["chartInfo", "dataType", "areaType"],
    data(){
      return {
        echartsNames:["摩拜","OFO"],
        perHourData:[[0,0],[0,0]],
        perHour:["2019-06","2019-07"],
        //---echarts
        titleEcharts:["企业车辆停放变化趋势","数量(辆)"],
        seriesDispose: [],
        colors:[],
      }
    },
    mounted(){
     // this.initData()
    },
    methods: {

      disposeData(){
        //处理数据
        this.echartsNames=[]
        this.perHour=[]
        this.perHourData=[]

        //处理颜色
        let _colors = {}
        this.$store.state.companyInfos.forEach(item=>{
          _colors[item.enterpriseNo] = item.color
        })

        this.chartInfo.forEach((item,index)=>{
          this.colors[index] = _colors[item.enterpriseNo]
          this.echartsNames.push(item.enterpriseName)
          this.perHourData[index]=[]

          if(this.areaType!=2 || (this.areaType==2 && this.dataType > 0)){
            item.list.forEach((item1,key)=>{
              this.perHourData[index].push(item1.vehicleTotal)
              if(index==0){
                this.perHour.push(this.dateFtt("hh:mm", item1.statisTime))
              }
            })
          }else{
            item.facilities.forEach((item1,key)=>{
              this.perHourData[index].push(item1.vehicleTotal)
              if(index==0){
                this.perHour.push(this.dateFtt("hh:mm", item1.statisTime))
              }
            })
          }
        })
        
        this.seriesDispose =[]
        this.echartsNames.forEach((item, key) => {
          this.seriesDispose.push({
            name: item,
            type: 'line',
            data: this.perHourData[key],
            symbol: this.perHourData[key].length <= 1 ? 'circle' : 'none',
            cursor: 'pointer',
            /*markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },*/
          },)
        })
      },
      initData(){
        this.disposeData()
        if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
          this.myChart.dispose();

        }

        this.myChart = this.echarts.init(document.getElementById('exAminationEcharts'))
        const colors = ['#FF4E17','#FED239',"green","#9f52d4","blue"]
        const option = {
          color: this.colors,
          title: {
            text: this.titleEcharts[0],
            subtext: '',
            x: 'center',
            textStyle: {
              fontSize: 18,
              fontWeight: 'bolder',
              color: '#3f51b5'// 主标题文字颜色
            },
          },
           /*toolbox: {
           show: true,
           x: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
           // 'center' ¦ 'left' ¦ 'right'
           feature: {
           dataZoom: {
           yAxisIndex: 'none'
           },
           dataView: {readOnly: false},
           magicType: {type: ['line', 'bar']},
           restore: {},
           }
           },*/
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          /*dataZoom: [
            {
              show: true,
              realtime: true,
            },

          ],*/
          legend: {
            // orient : 'vertical',
            // show: false,
            x: 'left',
            y: 'top',
            data: this.echartsNames,
            textStyle: {
              fontSize: 12,
              color: 'gray'          // 主标题文字颜色
            },
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.perHour,
              axisTick: {
                alignWithLabel: true
              },
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: 'gray'
              },
              axisLine: {
                lineStyle: {
                  color: 'gray',
                }
              },
              // interval: 10
            }
          ],
          yAxis: [
            {
              type: 'value',
              name:  this.titleEcharts[1],
              min: 0,
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: 'gray'
              },
              axisLine: {
                lineStyle: {
                  color: 'gray'
                }
              }
            }
          ],
          series: this.seriesDispose
        };
        this.myChart.setOption(option);
      }
    },
    watch: {

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../../common/stylus/mixin.styl"
  .exAminationEcharts
    width: 100%
    height 300px;
    border-radius 15px
    display: flex
    justify-content: center
    color gray !important
</style>
